<!DOCTYPE Html>
<Html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>CV</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="layout" id="page">
    <header>
        <h1>王诗杨</h1>
        <p>男 | 27岁 | 前端开发工程师 </p>
    </header>
    <aside>
        <div class="avatar">
            <div class="imgWrapper">
                <img src="./assets/avatar.JPG" alt="个人照片">
            </div>
        </div>

        <section>
            <h2>基础信息</h2>
            <div class="detail personal">
                <div class="item">
                    <span>学历</span>
                    <span>本科</span>
                </div>
                <div class="item">
                    <span>工作经验</span>
                    <span>4年</span>
                </div>
                <div class="item">
                    <span>意向薪资</span>
                    <span>18k</span>
                </div>
                <div class="item">
                    <span>英语能力</span>
                    <span>CET6</span>
                </div>
            </div>
        </section>


        <section>
            <h2>专业技能</h2>
            <div class="detail skills">
                <div class="radarWrapper">
                    <div id="main" style="width: 300px; height:240px;"></div>
                </div>
                <div class="item">
                    <span> <em>静态页面</em> </span>
                    <span>熟悉静态页面制作技巧，能将设计稿 <strong>完美还原</strong> </span>
                </div>
                <div class="item">
                    <span> <em>前后端分离</em> </span>
                    <span>熟悉前后端分离技术，包括 AJAX、跨域、前端路由、Cookie、Session 等</span>
                </div>
                <div class="item">
                    <span> <em>Vue</em> </span>
                    <span>熟练掌握 Vue全家桶的使用，包括 VueCli、VueRouter、Vuex 等</span>
                </div>
                <div class="item">
                    <span> <em>react</em> </span>
                    <span>熟练掌握 React全家桶的使用，包括 React hooks、ReactRouter、Redux 等</span>
                </div>
                <div class="item">
                    <span> <em>es6</em> </span>
                    <span>熟悉 ES6，包括 let / Promise / await / 析构赋值</span>
                </div>
                <div class="item">
                    <span> <em>webpack</em> </span>
                    <span>熟悉 Webpack 的配置，原理，知道常用的webpack配置，知道webpack插件的编写方法</span>
                </div>
                <div class="item">
                    <span> <em>cesium</em> </span>
                    <span>熟练掌握cesium原理以及相关api的使用方法，能够使用原生cesium封装各种组件以及实现各种业务场景</span>
                </div>
                <div class="item">
                    <span> <em>threejs</em> </span>
                    <span>熟悉threejs常用api的使用以及原理，包括网格模型，材质，光照，交互等</span>
                </div>
                <div class="item">
                    <span> <em>webgl</em> </span>
                    <span>熟悉webgl相关api的使用，包括着色器的写法，缓冲区的使用等</span>
                </div>
            </div>
        </section>

        <section>
            <h2>联系方式</h2>
            <div class="detail contact">
                <div class="item">
                    <svg>
                        <use xlink:href="#icon-phone"/>
                    </svg>
                    <span>18942948219</span>
                </div>
                <div class="item">
                    <svg>
                        <use xlink:href="#icon-email"/>
                    </svg>
                    <span>740907068@qq.com</span>
                </div>
                <div class="item">
                    <svg>
                        <use xlink:href="#icon-wechat"/>
                    </svg>
                    <span>a740907068</span>
                </div>
                <div class="item">
                    <svg>
                        <use xlink:href="#icon-city"/>
                    </svg>
                    <span>武汉</span>
                </div>

            </div>
        </section>

    </aside>
    <main>
        <section>
            <h2>关于我</h2>
            <p>3年前端开发经验，1年前端开发讲师经验，熟悉Vue，React技术框架，熟悉HTML5,CSS3页面制作，熟悉模块化，工程化开发流程，熟练使用ES6，有组件库，toB业务系统开发经验</p>
        </section>

        <section>
            <h2>教育经历</h2>
            <div class="item">
                <h3>武汉科技大学</h3>
                <p>2015-2019</p>
                <p>软件工程专业  大学本科毕业</p>
            </div>
        </section>
        <section>
            <h2>项目经历</h2>
            <div class="item">
                <h3>新中地gis开发特训营-第四阶段课程研发与教学</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                gis特训营是新中地教育公司的主营业务产品，致力于提供高质量的开发培训服务，第四阶段课程作为最后一个课程体系，主要包含了threejs，webgl，cesium三块内容
                            </li>
                            <li>
                                我参与了课程研发工作并负责教学工作，课程深入浅出的讲解了threejs，webgl，cesium三个框架的课程体系，服务了数百名学生，解决了大部分人的就业问题，受到学员一致好评
                            </li>
                            <li>
                                课程最后由一套cesium数字孪生项目作为收尾，用到了目前最新的技术，包括vue3，pinia，vite，webgl，shader，echarts，cesium等
                                哔站上有本项目的<a href="https://www.bilibili.com/video/BV1XC4y1U7of/?spm_id_from=333.337.search-card.all.click&vd_source=931fca97c9e574d8149c497d552d0420">视频展示</a>
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：vue3，vite,pinia,webgl,shader,echarts,cesium,turf等</li>
                </ul>
            </div>
            <div class="item">
                <h3>高校联合实习实训课程研发与教学</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                高校联合实习实训课程体系是新中地服务各个高校，开展的为期三周的一套课程，23年期间，我负责了该课程体系的研发与教学工作，先后前往了华中农业大学，中国地质大学，湖北大学，兰州财经大学，
                                江西师范大学等多所知名高校担任实训讲师。
                            </li>
                            <li>
                                该课程体系由本人独自开发完成，在15天的时间内，给高校的学生系统的讲解了前端三剑客，以及vue2，vue3框架，mapbox框架的使用，并以一套智慧城市的项目作为收尾。
                                哔站上有学生的<a href="https://www.bilibili.com/video/BV1iu4y187TB/?spm_id_from=333.337.search-card.all.click">作品展示</a>
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：html,css,js,vue2,vue3,mapbox,antv&L7等</li>
                </ul>
            </div>
            <div class="item">
                <h3>绍兴二三维数字孪生系统</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于React/Cesium的二三维数字孪生系统，主要功能包括绍兴水厂的全场景展示，泵房的内部数据展示，内部水流展示等
                            </li>
                            <li>
                                该系统属于三维数字孪生系统，重点在于三维场景的展示，设置，漫游，用户可以非常直观的看到绍兴各个水厂中，泵房的数据，站点，监测点的数据，水厂中管线的水流效果，泵房的加压效果。
                            </li>
                            <li>
                                该项目基于react和cesium框架进行开发，在现有的三维产品基础上，我添加了近地天空盒，3dtiles底图，3dtiles卷帘等效果，并且自己封装了一套三维气泡框的操作类，同时整套系统基本全部使用了react hooks，
                                这使得我对hooks的特性与使用方法更加了如指掌，同时引入了ahooks库，优化了代码结构。我在项目中负责了前端部分，完成了全场景展示设置，模型偏移设置，站点设置，全场景展示，泵房内部展示等功能，该项目将于8月初进行验收
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：React、React-router、ahooks、Echarts、mobx、Ant-design、Cesium、Arcgis、Webpack等</li>
                </ul>
            </div>
            <div class="item">
                <h3>二三维管网信息系统产品研发</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于React/Cesium的二三维空间信息系统
                            </li>
                            <li>
                                该系统提供丰富的全空间三维分析功能，支持场景漫游、可视域分析、通视分析、动态剖切分析、剖面分析、坡向分析、坡度分析、地形等值线、洪水淹没、填挖方分析、天际线分析、阴影率分析等功能，覆盖空中、地上、地表、地下多种应用场景，为空天地全空间一体化三维数据分析提供支撑。
                                在功能的体验上更加贴近应用场景，不仅可以在场景中直观的展现出分析结果，更能在面板上以定量的方式给出分析结果。
                                目前，基于二三维的产品已经建立多种行业应用，国土空间基础信息平台、空间规划信息服务平台、数字测绘成果管理平台等
                            </li>
                            <li>
                                该项目基于react和cesium框架进行开发，其中运用到了多种react相关的技术，比如使用mobx进行全局的状态管理，基于axios对请求进行的二次封装，使用cesium实现多种三维效果，比如降雨，喷泉，绘制三维正方形，多边形，圆形，使用cesium实现模型在地面的漫游效果等，
                                并且我在项目中大量使用了react hooks，提高了代码的简洁程度，并使用webpack配置了一套动态的皮肤切换功能。该产品也作为2021年部门的卖点之一，用于黄梅管网信息系统，深圳龙岗二三维信息系统等多个项目中，并通过相关专家的评审，进入了使用阶段。
                                我在项目中独自负责了三维部分的功能开发，以及二维的部分功能开发，在该产品的研发过程中，我熟练掌握了react以及相关的生态，熟练掌握了cesium框架的使用，了解了arcgis框架相关的一些二维效果的地图功能开发，在实际工作中，运用了webpack打包的一些配置，插件的使用。
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：React、React-router、Echarts、mobx、Ant-design、Cesium、Arcgis、Webpack等</li>
                </ul>
            </div>
            <div class="item">
                <h3>三维组件库开发</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于Vue2/Cesium的三维交互组件库
                            </li>
                            <li>
                                由于目前的二三维系统具有搭建比较麻烦，代码耦合度比较高的问题，我使用vue框架开发出了一套可以直接通过npm包的形式进行引用的三维效果库，目前该组件库已上传至npm，并且使用vuepress编写了一套详细的开发文档以供使用。
                            </li>
                            <li>
                                该项目基于vue2+cesium框架进行开发，并使用webpack进行打包，vuepress进行开发文档的编写，并部署私有npm并上传，用户只需要简单的几行代码，即可完成三维地图的展示，三维模型的漫游功能，三维喷泉，三维爆管，三维挖掘效果等
                                该项目极大的解决了目前代码耦合度高，难以维护的问题，极大的降低了三维功能的开发难度。同时提高了我对于vue框架的掌握程度。
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：Vue、Vue-CLI、webpack、Vue-router、Vuex、Ant-design、Vuepress、Cesium等</li>
                </ul>
            </div>
            <div class="item">
                <h3>绍兴数字第三方施工点管控大脑</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于React/Arcgis的多功能大屏
                            </li>
                            <li>
                                用于对绍兴市燃气第三方施工点进行多维度的信息监管，施工情况监控，视频监控，施工人员，车辆监管功能
                            </li>
                            <li>
                                该项目基于react+arcgis框架进行开发，主要使用到了react-router,mobx,react hooks,axios,echarts等技术进行大屏界面的实现,部分的图表展示使用了svg的方式编写,同时我将一些常用的图表封装为组件，供其他项目使用。
                                其中的地图交互主要由arcgis相关的api进行实现，包括graphic，featureLayer等。
                                项目中的视频对接了海康维视的第三方接口，通过iframe进行监控视频的实时监管
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：react、react-router、mobx、Ant-design、Arcgis、Echarts、Axios</li>
                </ul>
            </div>
            <div class="item">
                <h3>百川燃气集团GIS看板</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于React的大屏项目
                            </li>
                            <li>
                                百川燃气集团看板，主要用于百川燃气集团数据统计，包括管网资产，设备资产，隐患管网的统计以及巡检人员的统计。
                                同时该系统有两种显示模式，一种是企业级的看板，一种是集团级别的看板，该看板具有实时的皮肤切换功能
                            </li>
                            <li>
                                该项目基于react进行开发,其中实现皮肤的切换，我使用到了antd-theme-generator这个插件实现了动态的皮肤切换功能，
                                同时对于多种企业级大屏以及集团层面的大屏需要不一样显示效果的情况，我使用了react-router进行大屏之间的风格切换，
                                对于常规图表，我使用echarts进行开发完成，对于比较复杂的图表，我使用了原生的svg完美还原了设计效果。
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：react、react-router、mobx、Ant-design、Echarts、Axios、webpack</li>
                </ul>
            </div>
        </section>
        <section>
            <h2>开源作品</h2>
            <div class="item">
                <h3>Vue实现小王记账</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于Vue/Typescript的移动端单页面应用。
                            </li>
                            <li>
                                这是一款为了能完成自己快速记账的需求，使用figma自己设计，开发完成的极简记账应用，特点是快速记账，ui美观，并且可以通过图表查看自己的消费记录。
                            </li>
                            <li>
                                该项目使用Vue装饰器完成了Vue与Typescript的结合，让我对装饰器与Typescript有了深刻的理解。
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：Vue2、Vue-router、Vuex、Ant-design、Typescript</li>
                    <li>预览项目: <a href="http://wang_shiyang123.gitee.io/booking_website">点击查看</a></li>
                </ul>
            </div>
            <div class="item">
                <h3>react实现青青记账</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于React/Typescript的移动端单页面应用
                            </li>
                            <li>
                                这是从我自己的记账需求出发，参考了业界的优秀作品，自己从头到尾开发完成的一款记账应用，在Vue版本的小王记账基础上重新设计了ui，增加了很多功能。整个应用页面灵活可配置，画面简洁清爽
                            </li>
                            <li>
                                项目主要功能包括：综合数据展示，账户追踪，图表统计，预算统计，交易明细，分类管理等
                            </li>
                            <li>
                                该项目大量使用函数组件与React Hooks，让我对React Hooks中的UseState，UseEffect，UseRef等原生Hooks以及自定义Hooks有了深刻的理解和应用。并将react hooks的用法总结成了两篇博客
                                <a href="https://zhuanlan.zhihu.com/p/337290491">React学习之路-react hooks总结</a>
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：React、React-Hooks、Echarts、Ant-design、Typescript、Es6</li>
                    <li>预览项目: <a href="https://wang_shiyang123.gitee.io/qmoney-website">点击查看</a></li>
                </ul>
            </div>
            <div class="item">
                <h3>Vue2实现咪咕UI库</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于Vue2的ui框架
                            </li>
                            <li>
                                这是我为了学习如何使用Vue2造轮子而编写的ui框架
                            </li>
                            <li>
                                主要组件包括：栅格布局，layout布局，导航栏，弹出层等
                            </li>
                            <li>
                                整个ui库的官网基于VuePress进行制作，能够很好的适配PC与手机端。UI库中的所有轮子都使用Karma+Macha进行了单元测试，并通过travis ci进行持续集成。
                            </li>
                            <li>
                                整个造轮子的过程让我对Vue2的特性与单元测试有了很深的了解，造轮子所遇到的问题与经验我都将其记录在博客 <a href="https://zhuanlan.zhihu.com/p/341339270">《Vue造轮子笔记》</a> 中
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：Vue2、Vue-Router、Es6、Typescript、Karma、Macha</li>
                    <li>预览项目: <a href="https://aalldd.github.io/migu-ui-vue2/">点击查看</a></li>
                </ul>
            </div>
            <div class="item">
                <h3>Vue3实现咪咕UI库</h3>
                <ul>
                    <li>项目介绍：
                        <ol>
                            <li>
                                一款基于Vue3的ui框架
                            </li>
                            <li>
                                这是一款我在学习Vue3过程中完成的一个ui框架，整个项目基于Vue3+Typescript完成
                            </li>
                            <li>
                                主要组件包括Switch切换按钮，Button按钮，对话框，导航栏等
                            </li>
                            <li>
                                整个ui库的官网全程自己手写，没有引用任何的UI库，能够很好的适配PC与手机端。
                            </li>
                            <li>
                                整个制作过程让我对造轮子与Vue3的特性有了很深的认识，我将其总结成了一篇博客 <a href="https://zhuanlan.zhihu.com/p/338767483">《Vue3造轮子笔记》</a>
                            </li>
                        </ol>
                    </li>
                    <li>技术栈：Vue3、Vue-router、Typescript</li>
                    <li>预览项目: <a href="http://wang_shiyang123.gitee.io/migu-ui-website">点击查看</a></li>
                </ul>
            </div>
            <div class="item">
                <h3>会动的多啦A梦</h3>
                <ul>
                    <li>这是我在学习CSS3和动画时制作的一个可爱作品</li>
                    <li>技术栈：HTML5、CSS3、Javascript</li>
                    <li>代码链接： <a href="https://github.com/aalldd/Doraemon">点此查看</a></li>
                    <li>预览项目:  <a href="https://aalldd.github.io/Doraemon/dist/index.html">点此查看</a> </li>
                </ul>
            </div>
            <div class="item">
                <h3>简易画板</h3>
                <ul>
                    <li>这是我在学习Canvas时做的一个小作品</li>
                    <li>技术栈：Canvas</li>
                    <li>代码链接： <a href="https://github.com/aalldd/canvas-demo">点此查看</a></li>
                    <li>预览项目:  <a href="https://aalldd.github.io/canvas-demo/canvas_demo.html">点此查看</a> </li>
                </ul>
            </div>
            <div class="item">
                <h3>控制台翻译程序</h3>
                <ul>
                    <li>这是我在学习Nodejs时做的一个基于控制台的翻译小程序。</li>
                    <li>技术栈：Nodejs、Commanderjs、百度翻译Api</li>
                    <li>代码链接： <a href="https://github.com/aalldd/translate">点此查看</a></li>
                    <li>预览项目: 控制台使用npm install wang-fy 下载使用 </li>
                </ul>
            </div>
        </section>
        <section>
            <h2>工作经历</h2>
            <div class="item">
                <h3>新中地教育</h3>
                <ul>
                    <li>工作职位：三维前端gis开发讲师(2023年3月-至今)</li>
                    <li>工作内容：
                        <ol>
                            <li>负责公司主营业务-gis开发特训营四阶段课程的研发工作与教学工作</li>
                            <li>负责高校联合实习实训课程的研发以及教学工作</li>
                            <li>负责公司新产品-gis专项课程的研发</li>
                        </ol>
                    </li>
                </ul>
            </div>
            <div class="item">
                <h3>中地数码</h3>
                <ul>
                    <li>工作职位：前端开发工程师(2021年3月-2023年3月)</li>
                    <li>工作内容：
                        <ol>
                            <li>负责公司二三维一体化产品的开发</li>
                            <li>负责公司市政调度相关项目的研发</li>
                            <li>负责公司市政web5产品的开发</li>
                        </ol>
                    </li>
                </ul>
            </div>
            <div class="item">
                <h3>数字政通</h3>
                <ul>
                    <li>工作职位：前端h5开发(2020年8月-2020年12月)</li>
                    <li>工作内容：
                        <ol>
                            <li>负责公司智信H5产品的研发与bug修复</li>
                        </ol>
                    </li>
                </ul>
            </div>
            <div class="item">
                <h3>上海汉得信息</h3>
                <ul>
                    <li>工作职位：erp开发工程师(2019年4月-2020年3月)</li>
                    <li>工作内容：
                        <ol>
                            <li>负责公司主数据系统的前端开发</li>
                            <li>负责财务管理系统二期项目的前端开发</li>
                        </ol>
                    </li>
                </ul>
            </div>
        </section>
        <section>
            <h2>其他链接</h2>
            <div class="item">
                <ul>
                    <li><a href="https://www.zhihu.com/people/ting-ni-ting-wo-99-44/posts">我的博客</a> ，目前已有 24 篇技术文章</li>
                    <li><a href="https://www.yuque.com/dashboard">我的笔记</a> ，目前已有 9 篇技术笔记</li>
                    <li><a href="https://github.com/">我的 GitHub</a>，过去三个月有 400 次提交 </li>
                    <li>我的奖项：因开发成果突出，我获得了中地集团2021年的<em>mapgis新人奖</em> </li>
                </ul>
            </div>
        </section>
        <section>
            <h2>个人评价</h2>
            <ol>
                <li>拥有流畅的表达能力与文档撰写能力，能够编写出高质量的开发课程文档，并有条理的将技术表达出来</li>
                <li>痴迷新技术，喜欢承担有技术难度的工作，爱分享，善于知识总结梳理</li>
                <li>绝大部分计算机基础系自学，对未知领域、新技术具有学习和探索的热情，乐于不断延伸自己的知识结构和技术栈</li>
                <li>工作踏实、严谨；乐于团队合作与沟通，积极主动，有较强的责任感</li>
            </ol>
        </section>
    </main>
</div>
<svg style="display:none" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="icon-phone" viewBox="0 0 1024 1024">
        <path d="M493.3778059 449.15009529c16.29441978 4.65554869 32.58883953 13.96664542 41.8999369 27.93329083 9.31109674 13.96664542 13.96664542 32.58883953 9.31109673 51.21103365-2.32777434 6.98332303 0 16.29441978 4.65554869 20.94996845 4.65554869 6.98332303 11.63887108 11.63887108 18.62219411 11.63887109h4.65554804c6.98332303 0 11.63887108-2.32777434 16.29441978-4.65554869 6.98332303-4.65554869 11.63887108-11.63887108 11.63887172-18.62219412 13.96664542-67.50545341-30.26106518-135.01090681-95.43874491-148.97755159h-4.65554804c-13.96664542 0-25.60551651 9.31109674-27.93329149 23.27774215-2.32777434 6.98332303 0 16.29441978 4.65554869 23.27774279 2.32777434 9.31109674 9.31109674 13.96664542 16.29441977 13.96664543z"
              fill="#FE5F5F"></path>
        <path d="M525.96664542 346.72802801c39.57216256 9.31109674 72.1610021 32.58883953 93.11096991 65.17767906 20.94996846 34.91661388 30.26106518 74.48877579 20.94996845 114.06093836-2.32777434 16.29441978 6.98332303 32.58883953 23.27774279 34.91661387h4.65554805c6.98332303 0 11.63887108-2.32777434 16.29441977-4.65554868 6.98332303-4.65554869 11.63887108-11.63887108 11.63887172-18.62219411 11.63887108-55.86658233 0-111.73316403-30.2610652-158.28864897s-76.81655015-79.14432448-130.35535811-90.78319557h-4.6555487c-13.96664542 0-25.60551651 9.31109674-27.93329085 23.27774215-2.32777434 16.29441978 9.31109674 32.58883953 23.27774218 34.91661388zM623.73316403 640.02758378c-6.98332303-4.65554869-13.96664542-9.31109674-16.29441978-9.31109674-4.65554869-2.32777434-6.98332303-2.32777434-11.63887107-2.32777433-16.29441978 0-30.26106518 9.31109674-48.8832593 25.60551649-9.31109674 9.31109674-18.6221941 20.94996846-23.2777428 27.9332915-2.32777434 2.32777434-6.98332303 4.65554869-9.31109673 4.65554803-2.32777434 0-6.98332303-2.32777434-9.31109738-4.65554803-34.91661388-32.58883953-69.83322774-74.48877579-97.76651859-121.04426139-27.93329084-46.55548495-51.21103364-95.43874424-67.50545277-141.99422921-2.32777434-6.98332303 2.32777434-13.96664542 6.98332239-16.29441977 6.98332303-2.32777434 44.22771062-18.6221941 44.22771062-18.6221941 20.94996846-11.63887108 44.22771062-23.27774279 34.91661387-62.84990473-6.98332303-39.57216256-18.6221941-76.81655015-30.26106519-102.42206728-9.31109674-18.6221941-20.94996846-25.60551651-30.26106519-30.26106518-4.65554869-2.32777434-9.31109674-2.32777434-13.96664542-2.32777435-11.63887108 0-20.94996846 2.32777434-34.91661388 9.31109674-9.31109674 4.65554869-93.11096991 44.22771062-93.1109699 148.97755222 0 23.27774279 2.32777434 141.9942292 90.78319556 281.6606847 51.21103364 81.47209883 107.07761533 137.33868115 176.91084307 179.23861743 18.6221941 11.63887108 34.91661388 20.94996846 53.53880799 25.6055165 16.29441978 4.65554869 34.91661388 6.98332303 51.21103364 6.98332303 60.52213037 0 97.76651859-37.24438822 102.42206728-39.57216256 16.29441978-16.29441978 25.60551651-32.58883953 25.60551651-46.55548494 0-23.27774279-18.6221941-41.89993628-27.93329085-53.53880736-32.58883953-32.58883953-69.83322774-55.86658233-72.16100208-58.19435667z"
              fill="#FE5F5F"></path>
        <path d="M570.19435602 204.73379879h-4.65554804c-13.96664542 0-25.60551651 9.31109674-27.93329148 23.27774218-2.32777434 6.98332303 0 16.29441978 4.65554868 23.27774278 4.65554869 6.98332303 11.63887108 11.63887108 18.62219412 11.63887109 60.52213037 11.63887108 111.73316403 48.88325931 146.64977789 102.42206728 34.91661388 53.53880798 46.55548495 116.3887127 32.58883953 179.23861741-2.32777434 6.98332303 0 16.29441978 4.65554868 20.94996845 4.65554869 6.98332303 11.63887108 11.63887108 18.62219411 11.63887108h4.65554806c6.98332303 0 11.63887108-2.32777434 16.29441976-4.65554869 6.98332303-4.65554869 11.63887108-11.63887108 11.63887171-18.62219409 30.26106518-160.61642332-69.83322774-316.57729858-225.79410301-349.16613749z"
              fill="#FE5F5F"></path>
    </symbol>
    <symbol id="icon-wechat" viewBox="0 0 1024 1024">
        <path d="M566.49955555 633.856c0-89.88444445 78.62044445-161.67822222 183.52355556-172.94222222 0-1.024 0.11377778-1.93422222 0.11377778-2.95822223 0-156.44444445-161.90577778-283.19288889-361.58577778-283.19288888S27.07911111 301.51111111 27.07911111 457.95555555c0 71.56622222 88.51911111 179.08622222 105.13066667 198.656 1.59288889 1.93422222 2.16177778 4.66488889 1.36533333 7.168l-28.21688889 87.72266667c-2.27555555 6.94044445 5.23377778 12.40177778 9.78488889 7.28177778l59.73333334-67.92533333c1.59288889-1.82044445 3.98222222-2.50311111 6.144-1.59288889 21.39022222 8.30577778 136.30577778 51.88266667 207.64444444 51.88266667 70.656 0 136.53333333-15.92888889 192.28444444-43.34933334-9.216-19.79733333-14.44977778-41.30133333-14.44977778-63.94311111z"
              fill="#00BF27"></path>
        <path d="M245.07733333 398.67733333a39.48088889 34.47466667 90 1 0 68.94933334 0 39.48088889 34.47466667 90 1 0-68.94933334 0Z"
              fill="#FFFFFF"></path>
        <path d="M463.18933333 398.67733333a39.48088889 34.47466667 90 1 0 68.94933334 0 39.48088889 34.47466667 90 1 0-68.94933334 0Z"
              fill="#FFFFFF"></path>
        <path d="M589.48266667 633.856c0 81.92 84.76444445 148.36622222 189.32622222 148.36622222 37.31911111 0 97.50755555-22.75555555 108.77155556-27.19288889 1.13777778-0.45511111 2.38933333-0.11377778 3.18577777 0.91022222l31.28888889 35.61244445c2.38933333 2.73066667 6.37155555-0.22755555 5.12-3.75466667l-14.79111111-45.96622222c-0.45511111-1.25155555-0.11377778-2.73066667 0.68266667-3.75466666 8.64711111-10.24 55.06844445-66.56 55.06844444-104.10666667 0-81.92-84.76444445-148.36622222-189.32622222-148.36622223s-189.32622222 66.33244445-189.32622222 148.25244445z"
              fill="#00BF27"></path>
        <path d="M817.83466667 602.79466667a20.70755555 18.09066667 90 1 0 36.18133333 0 20.70755555 18.09066667 90 1 0-36.18133333 0Z"
              fill="#FFFFFF"></path>
        <path d="M703.71555555 602.79466667a20.70755555 18.09066667 90 1 0 36.18133334 0 20.70755555 18.09066667 90 1 0-36.18133334 0Z"
              fill="#FFFFFF"></path>
    </symbol>
    <symbol id="icon-city" viewBox="0 0 1024 1024">
        <path d="M466.66248369 707.35400192S260.32464969 515.07403426 260.32464969 373.27295196a256.74481032 256.74481032 0 1 1 513.48962143 0c0 141.80108308-206.01425068 333.75746741-206.01425068 333.75746741a70.46909775 70.46909775 0 0 1-101.13753674 0.35953591zM517.03350665 469.59270374a96.28379843 96.28379843 0 1 0 0-192.56759686 96.28379843 96.28379843 0 0 0 0 192.56759686z"
              fill="#F5A623"></path>
        <path d="M392.99351299 702.28454114a33.86831117 33.86831117 0 0 0-0.82693344 7.47835364c0 36.42101824 58.99989261 65.90298787 131.80597649 65.90298786S655.81448589 746.18391301 655.81448589 709.76289478c0-2.51675371-0.28762919-5.03350665-0.82693345-7.47835364 79.2417816 18.94755878 132.66886331 54.54164357 132.66886331 95.34900413 0 60.68971286-118.07169271 109.87426723-263.68385971 109.87426723S260.32464969 858.32325813 260.32464969 797.63354527c0-40.80736056 53.39112757-76.40144534 132.6688633-95.34900413z"
              fill="#F5A623"></path>
    </symbol>
    <symbol id="icon-email" viewBox="0 0 1295 1024">
        <path d="M946.99116042 255.72468923A30.15003667 30.15003667 0 0 0 919.55462687 236.12716542L256.253822 233.11216159a30.15003667 30.15003667 0 0 0-27.13503282 18.3915226 44.92355456 44.92355456 0 0 0-3.01500326 20.20052411v472.14957277A47.63705768 47.63705768 0 0 0 269.51983855 798.42534744h637.07027251A47.63705768 47.63705768 0 0 0 949.70466355 743.85378107V271.7042083a45.52655544 45.52655544 0 0 0-2.71350313-15.97951907z"
              fill="#38B1E7"></path>
        <path d="M929.20263868 750.48678906l-201.40224422-291.85235368a30.15003667 30.15003667 0 0 0-24.12002957-12.96451582l-226.12527412-4.22100503a30.15003667 30.15003667 0 0 0-25.32603076 12.96451583L246.90731091 750.48678906a30.15003667 30.15003667 0 0 0-2.11050279 30.15003666 30.15003667 30.15003667 0 0 0 26.5320325 17.78852172h633.1507682a30.15003667 30.15003667 0 0 0 26.83353211-16.28101982 30.15003667 30.15003667 0 0 0-2.11050224-31.65753856z"
              fill="#299ACC"></path>
        <path d="M947.29266058 247.28267916A31.65753859 31.65753859 0 0 0 919.55462687 225.57465256H256.253822a30.15003667 30.15003667 0 0 0-27.73803314 18.39152204A30.15003667 30.15003667 0 0 0 235.14879687 276.52821421l260.79781595 254.46630871a138.99166868 138.99166868 0 0 0 189.34223003 0l255.37080975-250.24530367a30.15003667 30.15003667 0 0 0 6.63300798-33.46654009z"
              fill="#6AC1E7"></path>
    </symbol>
</svg>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
<script src="./main.js"></script>
</body>
</Html>
